<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      :title="type + '工作周报'"
      width="40%"
      @close="closeDialog"
      class="dialogStyle"
    >
      <el-form
        label-width="120"
        ref="formRef"
        :rules="rules"
        :model="state.formInline"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="名称" prop="title">
              <el-input v-model="state.formInline.title" placeholder="请输入名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="时间范围" prop="startTime">
              <el-date-picker
                v-model="state.formInline.startTime"
                type="daterange"
                class="search_time"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="截止填写时间"
              v-if="type == '建设部'"
              prop="deadline"
            >
              <el-date-picker
                v-model="state.formInline.deadline"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="选择预计开始日期"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
  
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose" class="button_cancel2">取消</el-button>
          <el-button @click="submitWeekHandler" class="button_view"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import {
  ElDialog,
  ElForm,
  ElFormItem,
  ElRow,
  ElCol,
  ElMessage
} from 'element-plus'
import { weeklyApi } from '@/api/project'
const props = defineProps({
  data: {
    type: Object,
    default: {
      type: '公司',
      form: {}
    }
  }
})

const type = ref('工作')

const state = reactive({
  isAdd: true,
  formInline: {
    title: '',
    startTime: [],
    deadline: ''
  }
})
const rules = {
  title: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
  startTime: [{ required: true, message: '时间范围不能为空', trigger: 'blur' }],
  deadline: [{ required: true, message: '截止日期不能为空', trigger: 'blur' }]
}
const formRef = ref(null)
//提交工作周报
const submitWeekHandler = async () => {
  formRef.value.validate(async (valid, fields) => {
    if (valid) {
      let obj = {
        title: state.formInline.title,
        startTime: state.formInline.startTime[0],
        endTime: state.formInline.startTime[1],
        deadline: state.formInline.deadline + ' 23:59:59'
      }
      if (!state.isAdd) {
        obj.departmentWeeklyId=state.formInline.departmentWeeklyId
        console.log(obj);
        await weeklyApi.updateWeekly(obj).then((res) => {
          if (res.code == '200') {
            ElMessage.success('提交成功')
            dialogVisible.value = false
          }
        })
        //编辑
      } else {
        //新增

        await weeklyApi.createWeekly(obj).then((res) => {
          if (res.code == '200') {
            ElMessage.success('提交成功')
            dialogVisible.value = false
          }
        })
      }
    }
  })
}
const dialogVisible = ref(false)
const emits = defineEmits(['refreshList'])
const handleClose = () => {
  dialogVisible.value = false
}

//关闭弹框
const closeDialog = () => {
  for (const key in state.formInline) {
    if (key == 'startTime') {
      state.formInline[key] = []
    } else {
      state.formInline[key] = ''
    }
  }
  emits('refreshList')
}
const open = (params, data) => {
  dialogVisible.value = true

  state.isAdd = params.isAdd
  type.value = params.type

  if (data) {
    state.formInline.title = data.title
    state.formInline.startTime = [data.startTime, data.endTime]
    state.formInline.deadline = data.deadline
    state.formInline.departmentWeeklyId = data.departmentWeeklyId
  }
  console.log('son', dialogVisible.value)
}

defineExpose({
  open
})
</script>
<style lang="scss" scoped>
// .el-form-item,
// .el-select {
//   width: 100%;
// }
.el-form-item {
  width: 100% !important;
  .el-form-item__content {
    width: 100%;
    :deep(.el-date-editor.el-input) {
      width: 100%;
    }
  }
}
</style>
<style lang="scss" scoped>
@import '@/views/constructionProjectManage/static/dialog.scss';
</style>
